<template>
  <div class="container">
    <el-card>
      <myHeader :value="'添加权限'" @isShowDialog="isShowDialog" />
      <div class="hr">
        <hr>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          label="权限名称"
        />
        <el-table-column
          prop="code"
          label="权限标识"
        />
        <el-table-column
          prop="description"
          label="权限描述"
        />
        <el-table-column
          label="操作"
        >
          <template v-slot="{row}">
            <el-row type="flex" align="center">
              <el-button type="primary" @click="setEmployees(row.id)">添加子权限</el-button>
              <el-button @click="editEmployees(row.id)">编辑</el-button>
              <el-button type="danger" @click="delPermissions(row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="5"
          @next-click="nextClick"
          @prev-click="prevClick"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 添加和编辑 -->
    <el-dialog title="添加权限" :visible="dialogTableVisible" @close="closeDialog">
      <el-form ref="myFrom" :model="permissionsList" :rules="rules">
        <el-form-item label="权限名" :label-width="'80px'" prop="title">
          <el-input v-model="permissionsList.title" type="text" />
        </el-form-item>
        <el-form-item label="权限标识" :label-width="'80px'" prop="code">
          <el-input v-model="permissionsList.code" type="text" />
        </el-form-item>
        <el-form-item label="简介" :label-width="'80px'" prop="description">
          <el-input v-model="permissionsList.description" type="text" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-col :span="5">
          <el-button type="primary" size="small" @click="isOk">确定</el-button>
          <el-button size="small" @click="closeDialog">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 添加子权限 -->
    <el-dialog title="添加子权限" :visible="dialogRoleVisible" @close="dialogRoleVisible = false;id = ''">
      <el-form ref="myFrom" :model="permissionsList" :rules="rules">
        <el-form-item label="权限名" :label-width="'80px'" prop="title">
          <el-input v-model="permissionsList.title" type="text" />
        </el-form-item>
        <el-form-item label="权限标识" :label-width="'80px'" prop="code">
          <el-input v-model="permissionsList.code" type="text" />
        </el-form-item>
        <el-form-item label="简介" :label-width="'80px'" prop="description">
          <el-input v-model="permissionsList.description" type="text" />
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-col :span="5">
            <el-button type="primary" size="small" @click="isOkRole">确定</el-button>
            <el-button size="small" @click="dialogRoleVisible = false;id=''">取消</el-button>
          </el-col>
        </el-row>
      </el-form></el-dialog>
  </div>
</template>

<script>
import myHeader from '@/components/myHeader'
import { getPermissionsList, getPermissionsNum, delPermissions, addPermissions, getIdPermissions, editPermissions } from '@/api/permissions'

export default {
  components: {
    myHeader
  },
  data() {
    return {
      tableData: [], // 员工列表数据
      total: null, // 员工数量
      page: {
        _limit: 5,
        _start: 0
      },
      permissionsList: {
        title: '',
        code: '',
        description: ''
      },
      getRoleList: [], // 获取角色列表
      checkoutList: [], // 选择列表
      dialogTableVisible: false, // 编辑和添加
      dialogRoleVisible: false, // 分配角色
      id: '',
      rules: {
        title: [
          { required: true, message: '权限名不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '用户名2~10位', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '权限标识不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '权限描述不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    this.getPermissionsList()// 获取原工列表
    this.getPermissionsNum()// 获取员工数量
    // await this.getRoleLists()// 获取角色列表
  },
  methods: {
    //   获取权限列表
    async getPermissionsList() {
      const res = await getPermissionsList(this.page)
      this.tableData = res
    },
    // 获取权限数量
    async  getPermissionsNum() {
      this.total = await getPermissionsNum()
    },
    // 设置添加子权限
    async setEmployees(id) {
      this.id = id
      this.dialogRoleVisible = true
      const res = await getIdPermissions(id)
      this.checkoutList = res.roles.map(item => item.description)
    },
    // 编辑部门
    async  editEmployees(id) {
      this.dialogTableVisible = true
      const res = await getIdPermissions(id)
      this.permissionsList = res
    },
    // 删除权限
    async delPermissions(id) {
      try {
        await this.$confirm('确定删除当前员工吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delPermissions(id)
        // 刷下新页面
        if (this.tableData.length === 1) {
          this.page._start -= 5
        }
        this.getPermissionsList()
        this.getPermissionsNum()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    // 下一页
    nextClick() {
      this.page._start += 5
      this.getPermissionsList()
      this.getPermissionsNum()
    },
    // 上一页
    prevClick() {
      this.page._start -= 5
      this.getPermissionsList()
      this.getPermissionsNum()
    },
    // 选择页
    currentChange(val) {
      this.page._start = 5 * (val - 1)
      this.getPermissionsList()
      this.getPermissionsNum()
    },
    // 弹出模态框
    isShowDialog(val) {
      this.dialogTableVisible = val
    },
    // 关闭模态框
    async closeDialog() {
      this.dialogTableVisible = false
      await this.$refs.myFrom.resetFields()
      this.permissionsList = {
        title: '',
        code: '',
        description: ''
      }
    },
    // 分配权限点击确定
    async isOkRole() {
      const data = { pid: this.id.toString(), ...this.permissionsList }
      try {
        await addPermissions(data)
        this.$message.success('添加子权限成功')
        this.dialogRoleVisible = false
        this.id = ''
      } catch (error) {
        this.$message.error(error + '子权限失败！')
      }
    },
    // 点击确定
    async isOk() {
      const flag = this.permissionsList.id
      console.log(flag)
      await this.$refs.myFrom.validate()
      try {
        if (flag) {
          const { title, code } = this.permissionsList
          const res = { title, code }
          console.log(res)
          await editPermissions(this.permissionsList)
          this.$message.success('更新成功！')
        } else {
          await addPermissions(this.permissionsList)
          this.$message.success('注册成功！')
        }
        this.closeDialog()
        this.getPermissionsList()
        this.getPermissionsNum()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container{
    padding: 20px;
}
::v-deep .myBtn{
    display: flex;
    justify-content: center;
}
.hr{
     margin: 20px 0px;
}
</style>
